<template>
		<view class="mask-info" @touchstart="touchstart" @touchmove="touchmove">
			<view class="mask-title">
				<u-avatar :src="globalIcon.headPortrait" size='25'></u-avatar>
				<text>{{username}}</text>
			</view>
			<view class="mask-content">
				<video id="myVideo" :show-play-btn="false" :controls="false" :show-fullscreen-btn="false" :show-center-play-btn="false" :autoplay="true" objectFit="cover" v-if="isVideo" :src='href'></video>
				<image  v-else :src='href' mode="aspectFill"></image>
			</view>
			<view class="mask-util">
				<u-icon name="heart" color="#000000" size="28"></u-icon>
				<u-icon name="chat" color="#000000" size="28"></u-icon>
				<u-icon :name="globalIcon.sendIcon" color="#fff" size="25"></u-icon>
				<u-icon :name="globalIcon.optionIcon" color="#fff" size="25"></u-icon>
			</view>
		</view>
</template>

<script>
	import Config from "@/common/config.js"
	export default{
		props:{
			isVideo:{
				type:Boolean,
				default:false
			},
			url:{
				type:String|null,
				default:""
			},
			
		},
		data(){
			return {
			}
		},
		methods:{
			touchstart(event){
				event.preventDefault()
			},
			touchmove(event){
				event.preventDefault()
			}
		},
		computed:{
			username(){
				return this.$store.getters.username ?? "rose_are_roise";
			},
			href(){
				if(this.isVideo){
					if(this.$store.getters.getVideoContext===""){
						let context = uni.createVideoContext("myVideo",this);
						this.$store.commit("setVideoContext",context);
					}
					return Config.cloud_url + `${this.url}.mp4`;
				}
				return this.url ? Config.cloud_url + `${this.url}.jpg` : "";
			}
		},
		beforeDestroy(){
			console.log("beforeDestroy");
		},
	}
</script>

<style lang="scss" scoped>
	
	$radius:15rpx;
	
	.mask-info{
		position: fixed;
		left:0rpx;
		right:0rpx;
		top: var(--window-top);
		bottom: 0rpx;
		display: flex;
		flex-direction: column;
		user-select: none;
		pointer-events:none;
		
		.mask-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 15rpx 15rpx;
			column-gap: 10rpx;
			width: 100%;
			background-color: #fff;
			border-top-left-radius: $radius;
			border-top-right-radius: $radius;
		}
		
		.mask-util{
			width: 100%;
			display: flex;
			padding: 15rpx 15rpx;
			justify-content: space-around;
			background-color: #fff;
			border-bottom-right-radius: $radius;
			border-bottom-left-radius: $radius;
		}
		
		.mask-content{
			flex:1;
			image,video{
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
</style>